<template>
  <div ref="elRef" style="position: absolute">
    <slot ref="elRef">
      <div class="node-content"></div>
    </slot>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, shallowRef } from 'vue';
import { YuFlowNodeType } from './utils';
import { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';

interface IProps {
  jsplumb: BrowserJsPlumbInstance;
  node: YuFlowNodeType;
}

const props = defineProps<IProps>();
const elRef = shallowRef<HTMLDivElement>();
onMounted(() => {
  elRef.value.style.left = props.node.left || '';
  elRef.value.style.top = props.node.top || '';
  props.jsplumb.manage(elRef.value);
  for (let i = 0; i < props.node.params.length; i++) {
    props.jsplumb.addEndpoint(elRef.value, props.node.params[i], {
      connectorOverlays: [
            {
              type: "Arrow",
              options: {
                width: 10, // 箭头尾部的宽度
                length: 10, // 从箭头的尾部到头部的距离
                location: 1, // 位置，建议使用0～1之间
                direction: 1, // 方向，默认值为1（表示向前），可选-1（表示向后）
                // foldback: 0.623, // 折回，也就是尾翼的角度，默认0.623，当为1时，为正三角
                foldback: 0.7, // 折回，也就是尾翼的角度，默认0.623，当为1时，为正三角
              },
            },
          ],
    });
  }
});
</script>
<style scoped>
.node-content {
  width: 200px;
  height: 80px;
  border: 1px solid #000;
}
</style>
